<template>
  <div class="l7-map-container">
    <!--地图-->
    <div id="qdf-drawpolygon-map" class="qdf-drawpolygon-map">
      <div style="position: relative;top: 10px;right: 10px;display: flex;justify-content: right;z-index: 8;"
           v-if="drawable && nodeObj !== undefined">
        <div style="background-color: #1890ff;padding: 4px 6px;cursor: pointer;" v-if="!enable" @click="openDraw">
          <el-tooltip class="item" effect="dark" content="开启编辑" placement="top">
            <i class="el-icon-check" style="color: #FFFFFF;"></i>
          </el-tooltip>
        </div>
        <div style="background-color: #1890ff;padding: 4px 6px;cursor: pointer;" v-if="enable" @click="closeDraw">
          <el-tooltip class="item" effect="dark" content="关闭编辑" placement="top">
            <i class="el-icon-close" style="color: #FFFFFF;"></i>
          </el-tooltip>
        </div>
        <div style="background-color: #1890ff;padding: 4px 6px;margin-left: 5px;cursor: pointer;" @click="handleRedraw">
          <el-tooltip class="item" effect="dark" content="重新绘制" placement="top">
            <i class="el-icon-refresh-left" style="color: #FFFFFF;"></i>
          </el-tooltip>
        </div>
        <div style="background-color: #1890ff;padding: 4px 6px;margin-left: 5px;cursor: pointer;" @click="handleSave">
          <el-tooltip class="item" effect="dark" content="保存" placement="top">
            <i class="el-icon-receiving" style="color: #FFFFFF;"></i>
          </el-tooltip>
        </div>
      </div>

      <div v-if="enable"
           style="position: absolute;bottom: 0;left: 0;display: flex;justify-content: left;z-index: 1200;background-color: rgba(0, 0, 0, 0.4);color: #FFFFFF;width: 100%;font-size: 12px;padding: 2px 10px;">
        编辑状态：开启，可点击区域进行编辑
      </div>
    </div>
  </div>
</template>

<script>
import {Scene} from '@antv/l7'
import {GaodeMap} from '@antv/l7-maps'
import {DrawEvent, DrawPolygon} from '@antv/l7-draw'
import * as turf from '@turf/turf';

export default {
  name: 'drawregion',
  props: {
    drawable: {
      type: Boolean,
      default: true
    },
    callback: {
      type: Function,
      default: (data) => {
      }
    }
  },
  data() {
    return {
      scene: undefined,
      drawObj: undefined,
      jsonPoints: undefined,
      nodeObj: undefined,
      enable: false,
    }
  },
  methods: {
    reset() {
      this.jsonPoints = undefined
      this.scene = undefined
    },
    onClickClear() {
      this.drawObj.clear()
      this.jsonPoints = undefined
    },
    finishDraw() {
      if (this.jsonPoints === undefined) {
        this.$message.error('您还没有绘制区域，请先在地图上进行绘制')
      } else {
        this.callback(this.jsonPoints)
        this.close()
      }
    },
    mapDrawUpdated(features) {
      if (features && features.length) {
        let points = features[0].geometry.coordinates[0].map(p => {
          const point = [p[0], p[1]]
          return point
        })
        this.jsonPoints = JSON.stringify(points)
      }
    },
    openDraw() {
      this.drawObj.enable()
      this.enable = true
    },
    closeDraw() {
      this.drawObj.disable()
      this.enable = false
    },
    enableDraw(node, scale) {
      this.nodeObj = node
      if (this.drawObj) {
        this.drawObj.clear()
        // this.drawObj.enable()
      }
      if (node.zoom && node.areaPoint) {
        this.setShowDrawData(node.zoom / scale, node.areaPoint)
      }
    },
    disableDraw() {
      this.nodeObj = undefined
      if (this.drawObj) {
        this.drawObj.clear()
        this.drawObj.disable()
      }
    },
    handleRedraw() {
      if (this.nodeObj) {
        this.drawObj.clear()
        this.drawObj.enable()
      } else {
        this.$message.error('请先选择大分区或DMA节点')
      }
    },
    handleSave() {
      if (this.jsonPoints) {
        this.callback({
          zoom: this.scene.getZoom(),
          data: this.jsonPoints
        })
      } else {
        this.$message.error('请先绘制区域')
      }
    },
    setShowDrawData(zoom, coordinates) {
      const coors = []
      coors.push(JSON.parse(coordinates))
      const polygonList = [
        {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Polygon',
            coordinates: coors
          },
        }]

      const polygon = turf.polygon(coors);
      const centroid = turf.centroid(polygon);
      const cp = centroid.geometry.coordinates
      if (this.scene) {
        this.scene.setZoomAndCenter(zoom, cp)
      }
      if (this.drawObj) {
        this.drawObj.setData(polygonList)
      }
    },
    initMap() {
      const that = this

      let center
      if (this.$store.getters.cityCenter) {
        center = JSON.parse(this.$store.getters.cityCenter)
      } else {
        center = [116.397428, 39.90923]
      }

      // 全局加载高德地图API
      const map = new AMap.Map('qdf-drawpolygon-map', {
        viewMode: '3D',
        resizeEnable: true, // 是否监控地图容器尺寸变化
        // mapStyle: 'amap://styles/7c5d81c55592164b6f658b34249e458f',
        center: center,
        zoom: 19,
        minZoom: 5
      })

      this.scene = new Scene({
        id: 'qdf-drawpolygon-map',
        map: new GaodeMap({
          mapInstance: map
        }),
        logoVisible: false
      })

      this.scene.on('loaded', () => {
        that.drawObj = new DrawPolygon(this.scene, {multiple: false, maxCount: 1})
        that.drawObj.disable()

        // 监听绘制事件
        that.drawObj.on(DrawEvent.Change, (polygonList) => {
          that.mapDrawUpdated(polygonList)
        });

        that.$emit('mapLoaded', this.scene)
      })
    }
  },
  mounted() {
    setTimeout(() => {
      this.initMap()
    }, 500)
  },
  beforeDestroy() {
    this.drawObj.clear()
    this.drawObj.disable()
    this.drawObj = undefined
  }
}
</script>

<style lang="scss" scoped>
.l7-map-container {
  width: 100%;
  height: 100%;
}

.qdf-drawpolygon-map {
  width: 100%;
  height: 100%;
  //height: calc(100vh - 116px);
  overflow: hidden;
}

::v-deep .amap-copyright {
  display: none !important;
}
</style>
